import { useState } from 'react';
import { useTodoStore } from '../store/useTodoStore';
import xcn from 'xcn';

export const TodoInput = () => {
  const [text, setText] = useState('');
  const addTodo = useTodoStore(state => state.addTodo);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    addTodo(text);
    setText('');
  };

  const buttonClassName = xcn(text.trim().length == 0 && 'not-allow');

  return (
    <form onSubmit={handleSubmit} className="input-group">
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="接下来干哈？"
        autoFocus
      />
      <button type="submit" className={buttonClassName}>
        添加
      </button>
    </form>
  );
};